<template>
  <div>
    <el-dialog :close-on-click-modal="false" v-model="visible" title="详情">
      <el-descriptions title="基本信息">
        <el-descriptions-item label="姓名:">{{detailData.username}}</el-descriptions-item>
        <el-descriptions-item label="居住地:">{{detailData.from}}</el-descriptions-item>
        <el-descriptions-item label="星座:">双子座</el-descriptions-item>
        <el-descriptions-item label="性别:">{{ detailData.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄:">{{detailData.age}}</el-descriptions-item>
        <el-descriptions-item label="学校:">{{ detailData.agree }}</el-descriptions-item>
        <el-descriptions-item label="职业:">{{detailData.major}}</el-descriptions-item>
        <el-descriptions-item label="大学">
          <el-tag size="small">{{ detailData.school }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <vedio />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {  computed } from "vue";
import type { Ref } from "vue";
import vedio from './vedio.vue'


interface IProps {
  dialogFormVisible: boolean;
  setVisible: (v: boolean) => void;
  detailData: any;
}

interface IEmits {
  (e: "setVisible", v: boolean): void;
}

const props = defineProps<IProps>();
const emit = defineEmits<IEmits>();

const visible = computed({
  get() {
    return props.dialogFormVisible;
  },
  set(v: boolean) {
    emit("setVisible", v);
  },
});
</script>

<style scoped>
</style>